<template>
  <div class="private">
    <div class="header">
      <div class="cover" element-loading-background="rgba(0, 0, 0, 0.5)">
        <img :src="userInfo.bgCover || defaultBg" alt="" />
      </div>
    </div>
    <div class="body">
      <div class="nav">
        <div class="tabbar">
          <router-link
            class="router-link"
            :to="`/other/route/${id}`"
            :class="{ active: isActive(`/other/route/${id}`) }"
            >TA的线路</router-link
          >
          <router-link
            class="router-link"
            :to="`/other/collect/${id}`"
            :class="{ active: isActive(`/other/collect/${id}`) }"
            >TA的收藏</router-link
          >
          <router-link
            class="router-link"
            :to="`/other/like/${id}`"
            :class="{ active: isActive(`/other/like/${id}`) }"
            >TA的点赞</router-link
          >
          <router-link
            class="router-link"
            :to="`/other/booking/${id}`"
            :class="{ active: isActive(`/other/booking/${id}`) }"
            >TA的预约</router-link
          >
        </div>
      </div>
      <div class="content">
        <div class="simple-info">
          <div class="avatar">
            <img :src="userInfo.avatar || defaultAvatar" alt="" />
          </div>
          <div class="name">
            <span>{{ userInfo.name }}</span>
            <i
              :class="
                userInfo.gender !== 3
                  ? userInfo.gender === 1
                    ? 'el-icon-male'
                    : 'el-icon-female'
                  : ''
              "
              :style="{
                color:
                  userInfo.gender !== 3
                    ? userInfo.gender === 1
                      ? 'rgb(82, 160, 223)'
                      : 'rgb(232, 118, 90)'
                    : '',
              }"
              v-if="userInfo.gender !== 3"
            ></i>
            <i
              style="font-style: normal; font-size: 13px; font-weight: 100"
              v-else
              >保密</i
            >
          </div>
          <div class="phone">
            <i class="el-icon-phone"></i> {{ userInfo.phone || "暂未设置电话" }}
          </div>
          <div class="introduce">“{{ userInfo.introduce || "暂无简介" }}”</div>
          <div class="footer">
            <div class="create-time">
              <span>创建于</span
              ><span>{{ formatDate(userInfo.createTime) }}</span>
            </div>
            <div class="visitor">
              <span>访客量</span><span>{{ userInfo.visitor }}</span>
            </div>
          </div>
        </div>
        <div class="main">
          <router-view></router-view>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getUserInfo } from "@/api/user/user";
import defaultAvatar from "@/assets/defaultAvatar.png";
import defaultBg from "@/assets/default_bg.jpg";
export default {
  name: "Private",
  props: ["id"],
  data() {
    return {
      defaultBg,
      defaultAvatar,
      userInfo: {},
    };
  },
  created() {
    this.getUserInfo();
  },
  methods: {
    // 获取用户信息
    async getUserInfo() {
      const res = await getUserInfo({ id: this.id });
      this.userInfo = res.data;
    },
    // 时间格式判断
    padZero(num) {
      return num < 10 ? "0" + num : num;
    },
    // 时间格式化
    formatDate(timeArray) {
      if (!timeArray) return "暂无时间";
      let year = timeArray[0];
      let month = this.padZero(timeArray[1]);
      let day = this.padZero(timeArray[2]);
      let hour = this.padZero(timeArray[3]);
      let minute = this.padZero(timeArray[4]);
      let second = this.padZero(timeArray[5]) || "00";
      return `${year}-${month}-${day} ${hour}:${minute}:${second}`;
    },
    // 判断路由是否激活
    isActive(path) {
      return this.$route.path == path;
    },
  },
};
</script>

<style lang="less" scoped>
.private {
  .header {
    height: 440px;
    .cover {
      position: relative;
      height: 100%;
      img {
        width: 100%;
        height: 100%;
      }
    }
  }
  .body {
    min-height: 500px;
    .nav {
      height: 50px;
      background-color: #fff;
      box-shadow: 0 1px 10px #ccc;
      .tabbar {
        display: flex;
        justify-content: flex-end;
        margin: 0 240px;
        height: 100%;
        .router-link {
          position: relative;
          display: inline-block;
          margin-left: 30px;
          width: 100px;
          height: 100%;
          line-height: 50px;
          text-decoration: none;
          color: #333;
          font-size: 20px;
          &::after {
            content: "";
            position: absolute;
            bottom: 0;
            left: 50%;
            width: 0;
            height: 2px;
            background-color: rgb(246, 139, 17);
            transform: translate(-x(-50%));
            transition: all 0.3s;
          }
          &:hover::after {
            left: 0;
            width: 100%;
          }
        }
      }
    }
    .content {
      display: flex;
      align-items: flex-start; /* 确保子元素从顶部对齐，使得里面的div会自适应高度 */
      margin: 4px 0 10px;
      padding: 0 240px;
      .simple-info {
        position: relative;
        padding: 90px 0 0;
        width: 280px;
        box-shadow: 0 0 6px #ccc;
        .avatar {
          position: absolute;
          left: 50%;
          top: -46px;
          transform: translate(-50%, 0);
          width: 120px;
          height: 120px;
          border-radius: 50%;
          img {
            width: 100%;
            height: 100%;
            border-radius: inherit;
          }
        }
        .name {
          display: flex;
          justify-content: center;
          align-items: center;
          padding: 0 10px;
          height: 24px;
          span {
            height: 100%;
            line-height: 24px;
            display: inline-block;
            margin-right: 8px;
            max-width: 60%;
            font-weight: bold;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
          i {
            height: 100%;
            line-height: 24px;
            font-weight: bold;
          }
        }
        .phone {
          margin-top: 6px;
          color: #999;
          height: 30px;
          line-height: 30px;
          font-size: 15px;
        }
        .introduce {
          padding: 0 10px;
          margin-top: 6px;
          text-align: left;
          text-indent: 1em;
          line-height: 1.5;
        }
        .footer {
          display: flex;
          margin-top: 20px;
          border-top: 1px solid #ddd;
          height: 50px;
          .create-time {
            width: 60%;
            border-right: 1px solid #ddd;
            span {
              &:nth-of-type(2) {
                font-size: 14px;
                font-weight: 100 !important;
              }
            }
          }
          .visitor {
            flex: 1;
          }
          .create-time,
          .visitor {
            display: flex;
            flex-direction: column;
            justify-content: center;
            span {
              &:nth-of-type(1) {
                font-size: 15px;
              }
              &:nth-of-type(2) {
                font-weight: bold;
                margin-top: 2px;
              }
            }
          }
        }
      }
      .main {
        flex: 1;
        margin: 20px 0 20px 20px;
      }
    }
  }
}
.active {
  border-bottom: 2px solid rgb(246, 139, 17);
}
</style>